import { useSelector } from "react-redux";
import {Link} from "react-router-dom";

const List = () => {
  const articles = useSelector(state => state.user.userInfo ? state.user.userInfo.articleLists : []);
  return (
    <div className="user_list">
      <List header="文章列表">
        {articles.map(item => {
          const {title, createdAt, authName, id} = item;
          return (
            <Link key={id} to={`detail/${id}`}>
              <List.Item>
                <div className="article-item">
                  <div className="article-title">
                    {title}
                  </div>
                  <div className="article-auth">
                    作者: {authName}
                  </div>
                  <div className="article-createdat">
                    创建于: {createdAt}
                    {id}
                  </div>
                </div>
              </List.Item>
            </Link>
          )
        })}
      </List>
    </div>
  );
};

export default List;